<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色
			        2.product_card 设置样式  内边距，边距设置颜色，加倒角
					 加阴影  所有内容--居中：text-align:center
					3.图片边框倒角，外边距
					4.小米 su7  文字  外边距
					5.￥279999.00 文字大小
					6.颜色，外边距？内边距？
			 */
			#product_card{
				border: 1px solid #dfdfdf;
				width: 250px;
				height: 500px;
				text-align: center;
				padding: 30px;
				box-shadow: 4px 4px 4px 4px #f1ecdc;
				border-radius: 10px 10px 10px 10px;
			}
			h3{
				color: black;
			}
			#w{
				color: red;
			}
			p{
				color: #c7c7c7;
			}
			
			#b{
				border: 1px solid #e0e0e0;
				width: 200px;
				height: 25px;
				color: #c7c7c7;
				text-align: center;
				border-radius: 5px 5px 5px 5px;
			}
			button{
				background: red;
				border-radius: 5px 5px 5px 5px;
			}
			
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/小米su7.jpg" alt="su7" width="260px" height="358px">
			<h3>小米su7</h3>
			<p id="w">￥279999.00</p>
			<p>已有<span>10万+</span>人评价</p>
		</div>
		<hr>
		<div id="b">
			<input type="text" class="x" placeholder=" 搜索 京东商品 "/>
			<button>搜索</button>
		</div>
		<hr>
</html>